<template>
  <div class="app-container">
    <ProTable
      :columns.sync="columns"
      :showSearch.sync="showSearch"
      :getList="getList"
      :loading="loading"
      :resetQuery="resetQuery"
      :tableData="tableData"
    >
      <template #pagination>
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page-sizes="[10, 20, 50, 100, 200, 300, 500]"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </template>
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small">
          <el-row>
            <el-form-item prop="skuNo">
              <el-input :placeholder="$t('sku')" v-model="queryParams.skuNo" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <!-- 库位号 -->
            <el-form-item prop="spNo">
              <el-input :placeholder="$t('库位号')" v-model="queryParams.spNo" @keyup.enter.native="handleQuery" />
            </el-form-item>

            <el-form-item prop="skuExtra">
              <el-input :placeholder="$t('额外sku')" v-model="queryParams.skuExtra" />
            </el-form-item>
            <!-- 是否出运 -->
            <el-form-item prop="transportAll">
              <el-select v-model="queryParams.transportAll" :placeholder="$t('是否出运')">
                <el-option :label="$t('是')" value="1"></el-option>
                <el-option :label="$t('否')" value="0"></el-option>
              </el-select>
            </el-form-item>
            <!-- 时间选择 -->
            <el-form-item prop="purchaseTime">
              <el-date-picker
                :placeholder="$t('时间选择')"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                v-model="queryParams.purchaseTime"
                type="datetimerange"
                range-separator="-"
                :start-placeholder="$t('开始日期')"
                :end-placeholder="$t('结束日期')"
              >
              </el-date-picker>
            </el-form-item>
          </el-row>
          <el-row>
            <!-- 是否全部上架 -->
            <el-form-item prop="hitShelfAll">
              <el-select :placeholder="$t('是否全部上架')" v-model="queryParams.hitShelfAll">
                <el-option :label="$t('是')" value="1"></el-option>
                <el-option :label="$t('否')" value="0"></el-option>
              </el-select>
            </el-form-item>
            <!-- 是否收货 -->
            <el-form-item>
              <el-select v-model="queryParams.receiveGoodsNum" :placeholder="$t('是否收货')">
                <el-option :label="$t('是')" value="1"></el-option>
                <el-option :label="$t('否')" value="0"></el-option>
              </el-select>
            </el-form-item>
            <!-- 审核状态 -->
            <el-form-item>
              <el-select :placeholder="$t('审核状态')" v-model="queryParams.status">
                <!-- 0-未审核 1-审核 -->
                <el-option :label="$t('未审核')" value="0"></el-option>
                <el-option :label="$t('已审核')" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="janCode">
              <el-input
                :placeholder="$t('jan编码')"
                v-model="queryParams.janCode"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #actions>
        <el-button
          type="success"
          plain
          size="mini"
          @click="showImport = true"
          v-hasPermi="['distribution:purchase:importAdd']"
          icon="el-icon-upload2"
        >
          <!-- 导入 -->
          {{ $t('导入') }}
        </el-button>
        <el-button
          type="primary"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['distribution:purchase:export']"
        >
          <!-- 导出(带图片) -->
          导出(不带图片)
        </el-button>

        <el-popconfirm title="确认导出?" @confirm="handleExport(true)">
          <el-button
            style="margin: 0 10px"
            slot="reference"
            type="primary"
            plain
            icon="el-icon-download"
            size="mini"
            v-hasPermi="['distribution:purchase:exportImg']"
          >
            <!-- 导出(带图片) -->
            导出(带图片)
          </el-button>
        </el-popconfirm>
      </template>
      <template #skuNo="{ row }">
        <div @click="handleEdits(row)" style="cursor: pointer; color: #1890ff">
          {{ row.skuNo }}
        </div>
      </template>
      <template #imgUrl="{ row }">
        <el-image
          fit="contain"
          style="width: 50px; height: 50px"
          :key="Math.random()"
          v-hover="row.imgUrl"
          :src="row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
        />
      </template>
      <template #deliverWayCn="{ row }">
        <span>{{ handleDeliveGood(row.deliverWayCn) }}</span>
      </template>
      <template #type="{ row }">
        <!-- 采购类型 1-国内采购 2-酒水采购 3-日本当地采购 -->
        <div :style="{ color: $randomColor(row.type) }" v-if="row.type == 1">
          {{ $t('国内采购') }}
        </div>
        <div :style="{ color: $randomColor(row.type) }" v-if="row.type == 2">
          {{ $t('酒水采购') }}
        </div>
        <div :style="{ color: $randomColor(row.type) }" v-if="row.type == 3">
          {{ $t('日本当地采购') }}
        </div>
      </template>

      <template #priceUnit="{ row }">
        <div>{{ (row.payPrice / row.num).toFixed(2) }}</div>
        <div
          :class="
            row.payPriceUnit == 1 ? 'red' : row.payPriceUnit == 2 ? 'yellow ' : row.payPriceUnit == 3 ? 'blue' : ''
          "
        >
          {{ handlePriceUnit(row.payPriceUnit) }}
        </div>
      </template>
      <template #payPrice="{ row }">
        <div>
          {{ row.payPrice }}
        </div>
        <div
          :class="
            row.payPriceUnit == 1 ? 'red' : row.payPriceUnit == 2 ? 'yellow ' : row.payPriceUnit == 3 ? 'blue' : ''
          "
        >
          {{ handlePriceUnit(row.payPriceUnit) }}
        </div>
      </template>
      <template #skuUnitPrice="{ row }">
        <div>
          {{ row.skuUnitPrice }}
        </div>
        <div style="color: rgba(241, 129, 0, 0.973)">JPY</div>
      </template>
      <template #skuTotalValue="{ row }">
        <div>
          {{ row.skuTotalValue }}
        </div>
        <div style="color: rgba(241, 129, 0, 0.973)">JPY</div>
      </template>
      <template #refundAmount="{ row }">
        <div>
          {{ row.refundAmount }}
        </div>

        <span class="red" v-if="row.refundAmountUnit == 1">RMB</span>
        <span class="yellow" v-if="row.refundAmountUnit == 2">JPY</span>
        <span class="blue" v-if="row.refundAmountUnit == 3">USD</span>
      </template>

      <template #status="{ row }">
        <!--
            审核状态
            0-未审核
            1-审核
            -->
        <div
          @click="
            () => {
              handleCommand('checkPurchase', row)
            }
          "
          v-hasPermi="['distribution:purchase:checkPurchase']"
          v-show="row.status == 0"
          style="color: red; cursor: pointer"
        >
          {{ $t('未审核') }}
        </div>
        <div v-show="row.status == 1" style="color: green; cursor: pointer">
          <el-popconfirm
            v-show="hasPermission('distribution:purchase:cancelApply')"
            icon="el-icon-info"
            icon-color="red"
            @confirm="cancelAudit(row)"
            :title="$t('撤消审核?')"
          >
            <el-button type="text" style="color: green" slot="reference">
              {{ $t('已审核') }}
            </el-button>
          </el-popconfirm>
          <span v-show="!hasPermission('distribution:purchase:cancelApply')">
            {{ $t('已审核') }}
          </span>
        </div>
      </template>
      <template #receiveGoodsNum="{ row }">
        <div v-show="hasPermission('distribution:purchase:setPurchaseRefundInfo')">
          <div
            style="color: #13ce66; cursor: pointer"
            @click="handleReimburse(row.id, false)"
            v-if="row.receiveGoodsNum"
          >
            {{ row.receiveGoodsNum }}
          </div>
          <div style="color: #409eff" v-else @click="handleReimburse(row.id, false)">未收货</div>
        </div>
        <div v-show="!hasPermission('distribution:purchase:setPurchaseRefundInfo')">
          <div style="color: #13ce66" v-if="row.receiveGoodsNum">
            {{ row.receiveGoodsNum }}
          </div>
          <div v-else style="color: #409eff">未收货</div>
        </div>
      </template>
      <template #isSerializable="{ row }">
        <div style="color: #13ce66" v-if="row.isSerializable">
          {{ $t('是') }}
        </div>
        <div v-else style="color: red">
          {{ $t('否') }}
        </div>
      </template>
      <template #encasementNum="{ row }">
        <div>
          {{ row.encasementNum || 0 }}
        </div>
      </template>
      <template #transportNum="{ row }">
        <div>{{ row.transportNum || 0 }}</div>
      </template>
      <template #option="{ row }">
        <el-dropdown @command="(command) => handleCommand(command, row)">
          <span>{{ $t('更多') }}</span>
          <i class="el-icon-arrow-down"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              command="checkPurchase"
              :disabled="row.status == 1"
              v-hasPermi="['distribution:purchase:checkPurchase']"
            >
              {{ $t('审核') }}
            </el-dropdown-item>
            <el-dropdown-item command="purchaseinfo" v-hasPermi="['distribution:purchase:info']">
              {{ $t('详情') }}
            </el-dropdown-item>
            <!-- 审核前可修改 -->
            <el-dropdown-item
              :disabled="row.status == 1"
              command="purchaseinfochange"
              v-hasPermi="['distribution:purchase:setPurchaseInfo']"
            >
              {{ $t('强制修改') }}
            </el-dropdown-item>
            <!-- 审核前可修改 -->
            <el-dropdown-item
              :disabled="row.status == 1"
              command="edit"
              v-hasPermi="['distribution:purchase:updateDisPurchase']"
            >
              {{ $t('修改') }}
            </el-dropdown-item>
            <el-dropdown-item command="purchase" v-hasPermi="['distribution:purchase:remove']">
              {{ $t('删除') }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </ProTable>
    <!-- <PageSearch :showSearch.sync="showSearch" :getList="getList" :handleQuery="handleQuery" :resetQuery="resetQuery">
      <template #pagination>
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </template>
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small">
          <el-row>
            <el-form-item prop="skuNo">
              <el-input :placeholder="$t('sku')" v-model="queryParams.skuNo" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <!~~ 库位号 ~~>
            <el-form-item prop="spNo">
              <el-input :placeholder="$t('库位号')" v-model="queryParams.spNo" @keyup.enter.native="handleQuery" />
            </el-form-item>

            <el-form-item prop="skuExtra">
              <el-input :placeholder="$t('额外sku')" v-model="queryParams.skuExtra" />
            </el-form-item>
            <!~~ 是否出运 ~~>
            <el-form-item prop="transportAll">
              <el-select v-model="queryParams.transportAll" :placeholder="$t('是否出运')">
                <el-option :label="$t('是')" value="1"></el-option>
                <el-option :label="$t('否')" value="0"></el-option>
              </el-select>
            </el-form-item>
            <!~~ 时间选择 ~~>
            <el-form-item prop="purchaseTime">
              <el-date-picker
                :placeholder="$t('时间选择')"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                v-model="queryParams.purchaseTime"
                type="datetimerange"
                range-separator="-"
                :start-placeholder="$t('开始日期')"
                :end-placeholder="$t('结束日期')"
              >
              </el-date-picker>
            </el-form-item>
          </el-row>
          <el-row>
            <!~~ 是否全部上架 ~~>
            <el-form-item prop="hitShelfAll">
              <el-select :placeholder="$t('是否全部上架')" v-model="queryParams.hitShelfAll">
                <el-option :label="$t('是')" value="1"></el-option>
                <el-option :label="$t('否')" value="0"></el-option>
              </el-select>
            </el-form-item>
            <!~~ 是否收货 ~~>
            <el-form-item>
              <el-select v-model="queryParams.receiveGoodsNum" :placeholder="$t('是否收货')">
                <el-option :label="$t('是')" value="1"></el-option>
                <el-option :label="$t('否')" value="0"></el-option>
              </el-select>
            </el-form-item>
            <!~~ 审核状态 ~~>
            <el-form-item>
              <el-select :placeholder="$t('审核状态')" v-model="queryParams.status">
                <!~~ 0-未审核 1-审核 ~~>
                <el-option :label="$t('未审核')" value="0"></el-option>
                <el-option :label="$t('已审核')" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="janCode">
              <el-input
                :placeholder="$t('jan编码')"
                v-model="queryParams.janCode"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #actions>
        <el-button
          type="success"
          plain
          size="mini"
          @click="showImport = true"
          v-hasPermi="['distribution:purchase:importAdd']"
          icon="el-icon-upload2"
        >
          <!~~ 导入 ~~>
          {{ $t('导入') }}
        </el-button>
        <el-button
          type="primary"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['distribution:purchase:export']"
        >
          <!~~ 导出(带图片) ~~>
          导出(不带图片)
        </el-button>

        <el-popconfirm title="确认导出?" @confirm="handleExport(true)">
          <el-button
            style="margin: 0 10px"
            slot="reference"
            type="primary"
            plain
            icon="el-icon-download"
            size="mini"
            v-hasPermi="['distribution:purchase:exportImg']"
          >
            <!~~ 导出(带图片) ~~>
            导出(带图片)
          </el-button>
        </el-popconfirm>
      </template>
    </PageSearch>-->
    <!-- *************************************搜索区************************************* -->

    <!-- <el-table :height="calTableHeight()" v-loading="loading" ref="TableRef" :data="tableData" row-key="menuId">
      <!~~ sku编号 ~~>
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="skuNo"
        :label="$t('sku编号')"
        :show-overflow-tooltip="true"
        width="106"
        fixed="left"
      >
        <template slot-scope="scope">
          <div @click="handleEdits(scope.row)" style="cursor: pointer; color: #1890ff">
            {{ scope.row.skuNo }}
          </div>
        </template>
      </el-table-column>

      <!~~ 库位号 ~~>
      <el-table-column align="center" auto-fit prop="spNo" :label="$t('库位号')" fixed="left" width="120" />
      <el-table-column width="110" align="center" prop="skuExtra" :label="$t('额外sku')" fixed="left" />
      <el-table-column
        width="150"
        align="center"
        show-overflow-tooltip
        prop="janCode"
        :label="$t('jan编码')"
        custom-sort
      />

      <!~~ 采购数量 ~~>
      <el-table-column align="center" show-overflow-tooltip prop="num" :label="$t('采购数量')" fixed="left" />
      <!~~ 图片 ~~>
      <el-table-column align="center" prop="imgUrl" :label="$t('图片')">
        <template slot-scope="{ row }">
          <el-image
            fit="contain"
            style="width: 50px; height: 50px"
            :key="Math.random()"
            v-hover="row.imgUrl"
            :src="row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
          />
        </template>
      </el-table-column>
      <!~~ 品名 ~~>
      <el-table-column align="center" show-overflow-tooltip prop="skuNameCn" :label="$t('品名')" />
      <!~~ 国内发货方式 ~~>
      <el-table-column width="70" align="center" show-overflow-tooltip prop="deliverWayCn" :label="$t('国内发货方式')">
        <template slot-scope="{ row }">
          <span>{{ handleDeliveGood(row.deliverWayCn) }}</span>
        </template>
      </el-table-column>
      <!~~ 在库数量 ~~>
      <el-table-column align="center" show-overflow-tooltip prop="totalStock" :label="$t('在库数量')" />
      <!~~ 云数量 ~~>
      <el-table-column align="center" show-overflow-tooltip prop="cloudStock" :label="$t('云数量')" />
      <!~~ 采购日期 ~~>
      <el-table-column align="center" show-overflow-tooltip prop="createTime" width="150" :label="$t('采购日期')" />
      <!~~ 采购类型 ~~>
      <el-table-column align="center" show-overflow-tooltip prop="type" :label="$t('采购类型')">
        <template slot-scope="{ row }">
          {{ handlePurchaseType(row.type) }}
        </template>
      </el-table-column>
      <!~~ 单价 ~~>
      <el-table-column align="center" show-overflow-tooltip prop="purchaseRemark" :label="$t('单价')">
        <template slot-scope="{ row }">
          <div>{{ (row.payPrice / row.num).toFixed(2) }}</div>
          <div
            :class="
              row.payPriceUnit == 1 ? 'red' : row.payPriceUnit == 2 ? 'yellow ' : row.payPriceUnit == 3 ? 'blue' : ''
            "
          >
            {{ handlePriceUnit(row.payPriceUnit) }}
          </div>
        </template>
      </el-table-column>
      <!~~ 总价 ~~>
      <el-table-column align="center" show-overflow-tooltip prop="payPrice" :label="$t('总价')">
        <template slot-scope="{ row }">
          <div>
            {{ row.payPrice }}
          </div>
          <div
            :class="
              row.payPriceUnit == 1 ? 'red' : row.payPriceUnit == 2 ? 'yellow ' : row.payPriceUnit == 3 ? 'blue' : ''
            "
          >
            {{ handlePriceUnit(row.payPriceUnit) }}
          </div>
        </template>
      </el-table-column>

      <!~~ "单价(JPY) ~~>
      <el-table-column align="center" show-overflow-tooltip prop="skuUnitPrice" :label="$t('单价')">
        <template slot-scope="{ row }">
          <div>
            {{ row.skuUnitPrice }}
          </div>
          <div style="color: rgba(241, 129, 0, 0.973)">JPY</div>
        </template>
      </el-table-column>

      <!~~ 总货值(JPY) ~~>
      <el-table-column align="center" show-overflow-tooltip prop="skuTotalValue" :label="$t('总货值')">
        <template slot-scope="{ row }">
          <div>
            {{ row.skuTotalValue }}
          </div>
          <div style="color: rgba(241, 129, 0, 0.973)">JPY</div>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="refundAmount" :label="$t('退款金额')">
        <template slot-scope="{ row }">
          <div>
            {{ row.refundAmount }}
          </div>
          <!~~ <div
              :="
                row.refundAmountUnit == 1
                  ? 'red'
                  : row.refundAmountUnit == 2
                  ? 'yellow '
                  : row.refundAmountUnit == 3
                  ? 'blue'
                  : ''
              ">
              {{ handlePriceUnit(row.refundAmount) }}
            </div> ~~>
          <span class="red" v-if="row.refundAmountUnit == 1">RMB</span>
          <span class="yellow" v-if="row.refundAmountUnit == 2">JPY</span>
          <span class="blue" v-if="row.refundAmountUnit == 3">USD</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="refundNum" :label="$t('退款数量')" />
      <el-table-column align="center" show-overflow-tooltip prop="status" :label="$t('审核状态')">
        <template slot-scope="{ row }">
          <!~~
            审核状态
            0-未审核
            1-审核
            ~~>
          <div
            @click="
              () => {
                handleCommand('checkPurchase', row)
              }
            "
            v-hasPermi="['distribution:purchase:checkPurchase']"
            v-show="row.status == 0"
            style="color: red; cursor: pointer"
          >
            {{ $t('未审核') }}
          </div>
          <div v-show="row.status == 1" style="color: green; cursor: pointer">
            <el-popconfirm
              v-show="hasPermission('distribution:purchase:cancelApply')"
              icon="el-icon-info"
              icon-color="red"
              @confirm="cancelAudit(row)"
              :title="$t('撤消审核?')"
            >
              <el-button type="text" style="color: green" slot="reference">
                {{ $t('已审核') }}
              </el-button>
            </el-popconfirm>
            <span v-show="!hasPermission('distribution:purchase:cancelApply')">
              {{ $t('已审核') }}
            </span>
          </div>
        </template>
      </el-table-column>

      <!~~ 收货数量 ~~>
      <el-table-column align="center" show-overflow-tooltip prop="receiveGoodsNum" :label="$t('收货数量')">
        <template slot-scope="{ row }">
          <div v-show="hasPermission('distribution:purchase:setPurchaseRefundInfo')">
            <div
              style="color: #13ce66; cursor: pointer"
              @click="handleReimburse(row.id, false)"
              v-if="row.receiveGoodsNum"
            >
              {{ row.receiveGoodsNum }}
            </div>
            <div style="color: #409eff" v-else @click="handleReimburse(row.id, false)">未收货</div>
          </div>
          <div v-show="!hasPermission('distribution:purchase:setPurchaseRefundInfo')">
            <div style="color: #13ce66" v-if="row.receiveGoodsNum">
              {{ row.receiveGoodsNum }}
            </div>
            <div v-else style="color: #409eff">未收货</div>
          </div>
        </template>
      </el-table-column>
      <!~~ 装箱数量 ~~>
      <el-table-column align="center" show-overflow-tooltip prop="encasementNum" :label="$t('装箱数量')" />
      <!~~ 出运数量 ~~>
      <el-table-column align="center" show-overflow-tooltip prop="transportNum" :label="$t('出运数量')" />
      <!~~ 上架数量 ~~>
      <el-table-column align="center" show-overflow-tooltip prop="hitShelfNum" :label="$t('上架数量')" />

      <!~~ 是否分配序列号 ~~>
      <el-table-column align="center" show-overflow-tooltip prop="isSerializable" :label="$t('是否分配序列号')">
        <template slot-scope="{ row }">
          <div style="color: #13ce66" v-if="row.isSerializable">
            {{ $t('是') }}
          </div>
          <div v-else>
            {{ $t('否') }}
          </div>
        </template>
      </el-table-column>

      <!~~ 操作 ~~>
      <el-table-column align="center" fixed="right" :label="$t('操作')" :width="calWidth(150, 200, 150)">
        <template slot-scope="{ row }">
          <el-dropdown @command="(command) => handleCommand(command, row)">
            <el-button type="text" icon="el-icon-d-arrow-right">
              {{ $t('更多') }}
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                command="checkPurchase"
                :disabled="row.status == 1"
                v-hasPermi="['distribution:purchase:checkPurchase']"
              >
                {{ $t('审核') }}
              </el-dropdown-item>
              <el-dropdown-item command="purchaseinfo" v-hasPermi="['distribution:purchase:info']">
                {{ $t('详情') }}
              </el-dropdown-item>
              <!~~ 审核前可修改 ~~>
              <el-dropdown-item
                :disabled="row.status == 1"
                command="purchaseinfochange"
                v-hasPermi="['distribution:purchase:setPurchaseInfo']"
              >
                {{ $t('强制修改') }}
              </el-dropdown-item>
              <!~~ 审核前可修改 ~~>
              <el-dropdown-item
                :disabled="row.status == 1"
                command="edit"
                v-hasPermi="['distribution:purchase:updateDisPurchase']"
              >
                {{ $t('修改') }}
              </el-dropdown-item>
              <el-dropdown-item command="purchase" v-hasPermi="['distribution:purchase:remove']">
                {{ $t('删除') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <!~~ <el-popconfirm
            icon="el-icon-info"
            icon-color="red"
            v-if="row.status == 0"
            @confirm="handleAudit(row)"
            :title="$t('确定') + '?'">
            <el-button type="text" slot="reference">
              审核
            </el-button>
          </el-popconfirm> ~~>

          <!~~ <el-button
            style="margin: 0 15px"
            type="text"
            size="small"
            v-hasPermi="['distribution:purchase:info']"
            @click="handleDetail(row.id)">
            {{ $t('详情') }}
          </el-button> ~~>
          <!~~ 确定删除 ~~>
          <!~~ <el-popconfirm
            v-hasPermi="['distribution:purchase:remove']"
            @confirm="handleDelete(row.id)"
            :title="$t('确定删除?')">
            <el-link :underline="false" type="danger" slot="reference">
              {{ $t('删除') }}
            </el-link>
          </el-popconfirm> ~~>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page-sizes="[10, 20, 50, 100, 200, 300, 500]"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />-->
    <!-- 采购单 -->
    <el-dialog
      :visible.sync="showDialog"
      width="1500px"
      :title="showName == 'add' ? $t('添加') : $t('编辑')"
      destroy-on-close
      :close-on-click-modal="false"
    >
      <div class="my-dialog">
        <el-form class="left-form" ref="elForm" :model="form" :rules="rules" size="small" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <!-- 采购类型 -->
              <el-form-item :label="$t('采购类型')" prop="type">
                <el-select @change="setVisible" style="width: 100%" v-model="form.type">
                  <el-option
                    :label="item.label"
                    :value="+item.value"
                    v-for="(item, index) in purchase_type_list"
                    :key="index"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- 汇率 -->
              <el-form-item :label="$t('汇率')">
                <b>{{ exchangeRate }}</b>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 除了酒水 -->
          <div v-if="form.type != 2">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="sku" prop="skuId">
                  <el-select
                    @change="handleSelectSku"
                    style="width: 100%"
                    v-model="form.skuId"
                    filterable
                    remote
                    reserve-keyword
                    :placeholder="$t('请输入')"
                    :remote-method="getSkuList"
                    :loading="loading"
                  >
                    <el-option v-for="item in skuList" :key="item.id" :label="item.skuNo" :value="item.id"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <!-- 采购数量 -->
                <el-form-item :label="$t('采购数量')" prop="num">
                  <el-input-number
                    @change="setSkuUnitPrice"
                    style="width: 100%"
                    v-model="form.num"
                    controls-position="right"
                    :precision="0"
                    :min="1"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :span="12" style="padding-right: 10px">
                <!-- 付款总额 -->
                <el-form-item :label="$t('付款总额')" prop="payPrice">
                  <el-input
                    type="number"
                    @change="setInfo"
                    style="width: 100%"
                    :placeholder="$t('请输入')"
                    v-model="form.payPrice"
                  >
                    <!-- 付款总价单位 1-RMB 2-JPY 3-USD -->
                    <el-button slot="append">
                      <el-select @change="handleExchangeRate" style="width: 100px" v-model="form.payPriceUnit">
                        <el-option label="RMB" :value="1" />
                        <el-option label="JPY" :value="2" />
                        <el-option label="USD" :value="3" />
                      </el-select>
                    </el-button>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="6" style="padding-right: 0px">
                <!-- 总货值 -->
                <el-form-item :label="$t('总货值')" label-width="70px" prop="skuTotalValue">
                  <el-input disabled style="width: 100%" v-model="form.skuTotalValue">
                    <template slot="suffix">JPY</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <!-- 单价 -->
                <el-form-item label-width="50px" :label="$t('单价')" prop="skuUnitPrice">
                  <el-input disabled style="width: 100%" v-model="form.skuUnitPrice">
                    <template slot="suffix">JPY</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 厂家类型 -->
            <!-- 供应商采购单页面未选择sku前厂家选择先隐藏 -->
            <el-row v-if="form.skuId">
              <el-col :span="24">
                <el-form-item>
                  <el-radio-group @change="handleRadioChange" v-model="form.choice">
                    <el-radio :label="3">
                      <!-- 已采购厂家 -->
                      {{ $t('已采购厂家') }}
                    </el-radio>
                    <el-radio :label="1">
                      <!-- 所有厂家 -->
                      {{ $t('付款总额All') }}
                    </el-radio>
                    <el-radio :label="2" v-if="form.type != 2">
                      <!-- 新增厂家 -->
                      {{ $t('新增厂家') }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <div v-if="form.skuId">
              <!-- 已采购厂家 -->
              <el-row v-if="form.choice == 3">
                <el-col :span="24">
                  <!-- 已采购厂家 -->
                  <el-form-item :label="$t('已采购厂家')" prop="manufacturersId">
                    <el-select
                      filterable
                      @change="(e) => handleManufacturerDetail(e, 'old')"
                      style="width: 100%"
                      v-model="form.manufacturersId"
                    >
                      <el-option
                        v-for="(item, index) in manufacturersListOld"
                        :key="index"
                        :label="item.manufacturersName"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 厂家  选择所有厂家-->
              <el-row v-if="form.choice == 1">
                <el-col :span="24">
                  <!-- 所有厂家 -->
                  <el-form-item :label="$t('付款总额All')" prop="manufacturersId">
                    <el-select
                      filterable
                      @change="(e) => handleManufacturerDetail(e)"
                      style="width: 100%"
                      v-model="form.manufacturersId"
                    >
                      <el-option
                        v-for="(item, index) in manufacturersList"
                        :key="index"
                        :label="item.manufacturersName"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 厂家详情 -->
              <div style="padding: 0px 0px 20px 30px" v-if="form.choice == 1 || form.choice == 3">
                <el-descriptions :column="2" border>
                  <!-- 厂家名称 -->
                  <el-descriptions-item :label="$t('厂家名称')">
                    {{ manufacturerDetail.manufacturersName }}
                  </el-descriptions-item>
                  <!-- 厂家电话 -->
                  <el-descriptions-item :label="$t('厂家电话')">
                    {{ manufacturerDetail.manufacturersTel }}
                  </el-descriptions-item>
                  <!-- 厂家地址 -->
                  <el-descriptions-item :label="$t('厂家地址')">
                    {{ manufacturerDetail.manufacturersAddress }}
                  </el-descriptions-item>
                  <!-- 负责人名称 -->
                  <el-descriptions-item :label="$t('负责人名称')">
                    {{ manufacturerDetail.principalName }}
                  </el-descriptions-item>
                  <!-- 负责人电话 -->
                  <el-descriptions-item :label="$t('负责人电话')">
                    {{ manufacturerDetail.principalTel }}
                  </el-descriptions-item>
                  <!-- 网络联系方式 -->
                  <el-descriptions-item :label="$t('网络联系方式')">
                    {{ manufacturerDetail.netConcat }}
                  </el-descriptions-item>
                  <!-- 厂家链接 -->
                  <el-descriptions-item :label="$t('厂家链接')">
                    <el-link :href="manufacturerDetail.purchasePlatformLink" target="_blank" type="success">{{
                      manufacturerDetail.purchasePlatformLink
                    }}</el-link>
                  </el-descriptions-item>
                  <!-- 产品链接 -->
                  <el-descriptions-item :label="$t('产品链接')">
                    <el-link :href="manufacturerDetail.skuUrl" target="_blank" type="success">
                      {{ manufacturerDetail.skuUrl }}
                    </el-link>
                    <el-input placeholder="https://www.amazon.co.jp/dp/B0048CF0PG" v-model="manufacturerDetail.skuUrl">
                      <el-button
                        :disabled="!manufacturerDetail.manufacturersName"
                        @click="handleUpdateManufacturersSkuUrl"
                        slot="append"
                        icon="el-icon-edit"
                        v-hasPermi="['distribution:manufacturersSku:updateManufacturersSkuUrl']"
                      ></el-button>
                    </el-input>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
              <!-- 新增厂家 -->
              <div
                v-if="form.choice == 2"
                style="padding: 10px 80px; border: 1px dashed #c9c9c9; border-radius: 8px; margin-bottom: 20px"
              >
                <el-form ref="addForm" :model="addForm" :rules="addRules" label-position="top">
                  <el-row :gutter="50">
                    <el-col :span="12">
                      <!-- 厂家名称 -->
                      <el-form-item :label="$t('厂家名称')" prop="manufacturersName">
                        <el-input v-model="addForm.manufacturersName" :placeholder="$t('请输入')" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <!-- 厂家电话 -->
                      <el-form-item :label="$t('厂家电话')" prop="manufacturersTel">
                        <el-input v-model="addForm.manufacturersTel" :placeholder="$t('请输入')" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="50">
                    <el-col :span="12">
                      <!-- 厂家地址 -->
                      <el-form-item :label="$t('厂家地址')" prop="manufacturersAddress">
                        <el-input v-model="addForm.manufacturersAddress" :placeholder="$t('请输入')" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <!-- 负责人名称 -->
                      <el-form-item :label="$t('负责人名称')" prop="principalName">
                        <el-input v-model="addForm.principalName" :placeholder="$t('请输入')" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="50">
                    <el-col :span="12">
                      <!-- 负责人电话 -->
                      <el-form-item :label="$t('负责人电话')" prop="principalTel">
                        <el-input v-model="addForm.principalTel" :placeholder="$t('请输入')" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <!-- 网络联系方式 -->
                      <el-form-item :label="$t('网络联系方式')" prop="netConcat">
                        <el-input v-model="addForm.netConcat" :placeholder="$t('请输入')" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="50">
                    <el-col :span="12">
                      <!-- 厂家链接 -->
                      <el-form-item :label="$t('厂家链接')" prop="purchasePlatformLink">
                        <el-input v-model="addForm.purchasePlatformLink" :placeholder="$t('请输入')" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <!-- 产品链接 -->
                      <el-form-item :label="$t('产品链接')" prop="skuUrl">
                        <el-input v-model="addForm.skuUrl" :placeholder="$t('请输入')" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </div>
          </div>
          <div v-if="form.type == 2" style="margin: 20px 0">
            <div>
              <el-button>下载模板</el-button>
              <el-button>导入模板</el-button>
            </div>
          </div>

          <el-row>
            <el-col :span="24">
              <!-- 采购备注 -->
              <el-form-item :label="$t('备注')" prop="purchaseRemark">
                <el-input v-model="form.purchaseRemark" :rows="4" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 厂家关联sku -->
        <div class="right-table">
          <div class="right-table_title">厂家关联sku</div>
          <el-table class="table" ref="TableRef" :data="manufacturersSku.tableData">
            <!-- sku -->
            <el-table-column label="sku" prop="skuNo" width="120" align="center" />

            <!-- 图片 -->
            <el-table-column :label="$t('图片')" align="center">
              <template slot-scope="{ row }">
                <el-image
                  style="width: 40px; height: 40px; object-fit: cover"
                  lazy
                  :src="row.skuImg + '?x-oss-process=image/resize,w_100/quality,q_70'"
                />
              </template>
            </el-table-column>
            <!-- 库存 -->
            <el-table-column label="库存" prop="skuStock" align="center" />
            <!-- 采购链接 -->
            <el-table-column show-overflow-tooltip label="采购链接" align="center">
              <template slot-scope="{ row }">
                <el-link :href="row.skuUrl" target="_blank">
                  {{ row.skuUrl }}
                </el-link>
              </template>
            </el-table-column>
            <!-- 上次采购时间 -->
            <el-table-column show-overflow-tooltip label="上次采购时间" prop="purchaseTime" align="center" />
          </el-table>

          <pagination
            :total="manufacturersSku.pageTotal"
            :page.sync="manufacturersSku.queryParams.pageNum"
            :limit.sync="manufacturersSku.queryParams.pageSize"
            @pagination="getManufacturersSkuListByPurchase"
          />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">
          <!-- 取 消 -->
          {{ $t('取消') }}
        </el-button>
        <el-button type="primary" @click="submitForm">
          <!-- 确 定 -->
          {{ $t('确定') }}
        </el-button>
      </div>
    </el-dialog>

    <!-- sku详情/修改 -->
    <Skucontmoduler @relaod="relaod" ref="Skucontmoduler"></Skucontmoduler>
    <Import
      action="/distribution/purchase/importAdd"
      templateUrl="distribution/purchase/tempDownload"
      @success="getList"
      :show.sync="showImport"
    >
      <template slot="alert">
        <!-- 只能选择已存在的厂家，不存在的厂家需要先创建厂家 -->
        <el-alert
          :title="$t('只能选择已存在的厂家，不存在的厂家需要先创建厂家')"
          :closable="false"
          type="error"
          style="margin: 5px 0"
          center
        />
      </template>
    </Import>
    <!-- 退款 -->
    <Refound :show.sync="refound.show" :formData="refound.formData" @close="getList" />
    <!-- 修改采购信息和详情 -->
    <Particulars
      @relaod="getList"
      :detailInfo="detailInfo"
      :deliver_goods_cn_list="deliver_goods_cn_list"
      :purchase_type_list="purchase_type_list"
    ></Particulars>
    <!-- 修改退款 -->
    <Reimburse
      @relaod="getList"
      :detailInfo="detailInfo"
      :deliver_goods_cn_list="deliver_goods_cn_list"
      :purchase_type_list="purchase_type_list"
    ></Reimburse>
    <Edit :show.sync="edit.show" :formData="edit.formData" />
  </div>
</template>

<script>
import Particulars from './component/particulars.vue'
import Skucontmoduler from '@/components/Skucontmoduler'
import { useDict } from '@/utils/useDict'
import Edit from './component/edit.vue'

import {
  updatePurchase,
  getManufacturersListOld,
  getManufacturerList,
  deletePurchase,
  getPurchaseListByDistributor,
  getConversionRateList,
  getPurchaseInfo,
  getSkuList,
  createPurchaseOrderCn,
  createPurchaseOrderJp,
  getManufacturers,
  getManufacturersSkuListByPurchase,
  checkPurchase,
  updateManufacturersSkuUrl,
  cancelApply,
} from '@/api/purchasingManage/manufacturerPurchaseOrder'
import Import from '@/components/Import/index.vue'
import Refound from './refound.vue'
import Reimburse from './component/reimburse'
import { checkPermi } from '@/utils/permission'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'ManufacturerPurchaseOrder',
  components: {
    Edit,
    Import,
    Refound,
    Skucontmoduler,
    Particulars,
    Reimburse,
  },
  data() {
    return {
      /**@type {ProTableColumns}*/
      columns: [
        {
          label: this.$t('sku编号'),
          prop: 'skuNo',
          width: 110,
          fixed: 'left',
          useSlot: true,
        },
        { label: this.$t('库位号'), prop: 'spNo', width: 120, fixed: 'left' },
        { label: this.$t('额外sku'), prop: 'skuExtra', width: 110, fixed: 'left' },
        { label: this.$t('采购数量'), prop: 'num', width: 110, fixed: 'left' },
        { label: this.$t('图片'), prop: 'imgUrl', width: 110, useSlot: true, fixed: 'left' },
        { label: this.$t('jan编码'), prop: 'janCode', width: 110 },
        { label: this.$t('品名'), prop: 'skuNameCn', width: 110 },
        { label: this.$t('国内发货方式'), prop: 'deliverWayCn', width: 110, useSlot: true },
        { label: this.$t('在库数量'), prop: 'totalStock', width: 110 },
        { label: this.$t('云数量'), prop: 'cloudStock', width: 110 },
        { label: this.$t('采购日期'), prop: 'createTime', width: 110 },
        { label: this.$t('采购类型'), prop: 'type', width: 110, useSlot: true },

        { label: this.$t('单价'), prop: 'priceUnit', width: 110, useSlot: true },
        { label: this.$t('总价'), prop: 'payPrice', width: 110, useSlot: true },
        { label: this.$t('单价(JPY)'), prop: 'skuUnitPrice', width: 110, useSlot: true },
        { label: this.$t('总货值(JPY)'), prop: 'skuTotalValue', width: 110, useSlot: true },
        { label: this.$t('退款金额'), prop: 'refundAmount', width: 110, useSlot: true },

        { label: this.$t('审核状态'), prop: 'status', width: 110, useSlot: true },
        { label: this.$t('退款数量'), prop: 'refundNum', width: 110 },
        { label: this.$t('收货数量'), prop: 'receiveGoodsNum', width: 110, useSlot: true },
        { label: this.$t('是否分配序列号'), prop: 'isSerializable', width: 120, useSlot: true },
        { label: this.$t('装箱数量'), prop: 'encasementNum', width: 110, useSlot: true },
        { label: this.$t('出运数量'), prop: 'transportNum', width: 110, useSlot: true },
        { label: this.$t('上架数量'), prop: 'hitShelfNum', width: 110 },
        { label: this.$t('采购备注'), prop: 'purchaseRemark', width: 110 },
        { label: this.$t('采购单备注'), prop: 'remark', width: 110 },
        { label: this.$t('操作'), prop: 'option', fixed: 'right', useSlot: true },
      ],
      edit: {
        show: false,
        formData: {},
      },
      showSearch: false,
      /**退款数量 */
      refound: { show: false, formData: {} },
      /**厂家关联sku */
      manufacturersSku: {
        tableData: [],
        tableCheck: [],
        pageTotal: 0,
        queryParams: {
          manufacturersId: '',
          pageNum: 0,
          pageSize: 10,
        },
      },
      /**
       * 导入组件的显示与隐藏
       */
      showImport: false,
      /**发货方式 */
      deliver_goods_cn_list: [],
      /** 已采购厂家列表*/
      manufacturersListOld: [],
      showName: '',
      purchase_type_list: [],
      form: {
        type: 1,
        payPrice: null,
        skuTotalValue: null,
        payPriceUnit: 1,
        choice: 1,
        num: 1,
        skuId: '',
        skuTotalValue: 0,
        skuUnitPrice: 0,
        manufacturersId: '',
      },
      /**汇率 */
      exchangeRate: '',
      /**汇率 */
      exchangeRateList: [],
      addForm: {
        manufacturersName: '',
        manufacturersTel: '',
        manufacturersAddress: '',
        principalName: '',
        principalTel: '',
        contact: '',
      },
      tableCheck: [],
      tableData: [],
      /**获取供应厂家列表  （厂家） */
      manufacturersList: [],
      skuList: [],
      showDialog: false,
      rules: {
        type: [{ required: true, message: '请输入', trigger: 'blur' }],
        skuId: [{ required: true, message: '请选择', trigger: 'blur' }],
        num: [{ required: true, message: '请输入', trigger: 'blur' }],
        payPrice: [{ required: true, message: '请输入数字类型', trigger: 'blur' }],
        skuTotalValue: [{ required: true, message: '请输入', trigger: 'blur' }],
        skuUnitPrice: [{ required: true, message: '请输入', trigger: 'blur' }],
        manufacturersId: [{ required: true, message: '请选择', trigger: 'blur' }],
      },
      addRules: {
        id: [{ required: true, message: 'ID不能为空', trigger: 'blur' }],
        manufacturersName: [{ required: true, message: '厂家名称不能为空', trigger: 'blur' }],
        // manufacturersTel: [
        //   { required: true, message: "厂家电话不能为空", trigger: "blur" },
        // ],
        // principalName: [
        //   { required: true, message: "负责人名称不能为空", trigger: "blur" },
        // ],
        // principalTel: [
        //   { required: true, message: "负责人电话不能为空", trigger: "blur" },
        // ],
        // netConcat: [
        //   { required: true, message: "负责人电话不能为空", trigger: "blur" },
        // ],

        // manufacturersAddress: [
        //   { required: true, message: "厂家地址不能为空", trigger: "blur" },
        // ],
        // purchasePlatformLink: [
        //   { required: true, message: "厂家链接不能为空", trigger: "blur" },
        // ],
        // deliverPositionCn: [
        //   { required: true, message: "中国发货仓库不能为空", trigger: "blur" },
        // ],
        // deliverWayCn: [
        //   { required: true, message: "中国发货方式不能为空", trigger: "blur" },
        // ],
        // isDefault: [
        //   {
        //     required: true,
        //     message: "是否默认供应厂家不能为空",
        //     trigger: "blur",
        //   },
        // ],
        // skuPackDemand: [
        //   { required: true, message: "产品捆绑要求不能为空", trigger: "blur" },
        // ],
        // remark: [{ required: true, message: "备注不能为空", trigger: "blur" }],
      },
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        purchaseTime: [],
      },
      /**详情 */
      detailInfo: {
        status: 0,
        title: '',
        show: false,
        Reimburseshow: false,
        rules: {
          type: [{ required: true, message: '请选择', trigger: 'blur' }],
          num: [{ required: true, message: '请输入', trigger: 'blur' }],
          payPrice: [{ required: true, message: '请输入', trigger: 'blur' }],
          refundNum: [{ required: true, message: '请输入', trigger: 'blur' }],
          refundAmount: [{ required: true, message: '请输入', trigger: 'blur' }],
          refundReason: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
        form: {},
      },
      /**厂家详情 */
      manufacturerDetail: {
        id: '',
        distrId: '',
        manufacturersSkuId: '',
        purchasePlatformLink: '',
        manufacturersName: '',
        manufacturersTel: '',
        manufacturersAddress: '',
        principalName: '',
        principalTel: '',
        netConcat: '',
        skuUrl: '',
      },
      DomesticDeliveryData: {
        show: true,
      },
    }
  },
  async created() {
    this.get_deliver_goods_cn_list()

    await this.getTypeList()

    this.getList()
    this.getExchangeRate()
  },

  methods: {
    handleEdit(row) {
      this.edit.formData = row
      this.edit.show = true
    },
    handleCommand(command, row) {
      switch (command) {
        case 'purchase':
          this.handleDelete(row.id)
          break
        case 'checkPurchase':
          this.handleAudit(row)
          break
        case 'purchaseinfo':
          this.handleDomesticDeliveryType(row.id, true)
          break
        case 'purchaseinfochange':
          this.handleDomesticDeliveryType(row.id, false)
          break
        case 'edit' /**强制修改 */:
          this.handleEdit(row)
          break
        default:
          break
      }
    },
    hasPermission(str) {
      return checkPermi([str])
    },
    /**修改退款 */
    handleReimburse(id, type) {
      this.detailInfo.disabled = type
      this.detailInfo.title = '修改退款信息'
      /**需要补全数据 */
      getPurchaseInfo(id).then((res) => {
        this.detailInfo.Reimburseshow = true
        this.detailInfo.form = JSON.parse(JSON.stringify(res.data))

        const payPriceUnit = this.detailInfo.form.payPriceUnit

        let exchangeRate

        // 付款总价单位 1-RMB 2-JPY 3-USD
        if (payPriceUnit == 1) {
          const rate = this.exchangeRateList?.filter((i) => i.baseCode == 'CNY')
          exchangeRate = rate[0].conversionRate
        }
        if (payPriceUnit == 2) {
          exchangeRate = 1
        }
        if (payPriceUnit == 3) {
          const rate = this.exchangeRateList?.filter((i) => i.baseCode == 'USD')
          exchangeRate = rate[0].conversionRate
        }
        this.detailInfo.form.exchangeRate = exchangeRate
      })
    },
    /**强制修改 */
    handleDomesticDeliveryType(id, type) {
      this.detailInfo.disabled = type
      this.detailInfo.title = type ? '详情' : '强制修改采购信息'
      /**需要补全数据 */
      getPurchaseInfo(id).then((res) => {
        this.detailInfo.show = true
        this.detailInfo.form = JSON.parse(JSON.stringify(res.data))

        const payPriceUnit = this.detailInfo.form.payPriceUnit

        let exchangeRate

        // 付款总价单位 1-RMB 2-JPY 3-USD
        if (payPriceUnit == 1) {
          const rate = this.exchangeRateList?.filter((i) => i.baseCode == 'CNY')
          exchangeRate = rate[0].conversionRate
        }
        if (payPriceUnit == 2) {
          exchangeRate = 1
        }
        if (payPriceUnit == 3) {
          const rate = this.exchangeRateList?.filter((i) => i.baseCode == 'USD')
          exchangeRate = rate[0].conversionRate
        }
        this.detailInfo.form.exchangeRate = exchangeRate
      })
    },
    /**撤销审核接口 */
    cancelAudit(row) {
      cancelApply({ id: row.id }).then((res) => {
        this.$message({
          type: 'success',
          message: '操作成功',
        })
        this.getList()
      })
    },
    handleUpdateManufacturersSkuUrl() {
      const data = {
        id: this.manufacturerDetail.id,
        distrId: this.manufacturerDetail.distrId,
        manufacturersSkuId: this.manufacturerDetail.manufacturersSkuId,
        skuId: this.form.skuId,
        skuUrl: this.manufacturerDetail.skuUrl,
      }
      updateManufacturersSkuUrl(data).then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.$message({ type: 'success', message: msg })
        }
      })
    },
    /**退货 */
    handleRefound(row) {
      this.refound.formData = JSON.parse(JSON.stringify(row))
      this.refound.show = true
    },
    /**
     *
     * @param {*} isPass  是否通过
     */
    handleAudit(row) {
      this.$confirm(this.$t('确认通过?'), this.$t('提示'), {
        type: 'warning',
      }).then(() => {
        checkPurchase({ id: row.id, status: 1 }).then((res) => {
          const { code, data, msg } = res
          if (code === 200) {
            this.$message({ type: 'success', message: msg })

            this.getList()
          }
        })
      })
    },
    getManufacturersSkuListByPurchase() {
      const data = {
        ...this.manufacturersSku.queryParams,
        skuId: this.form.skuId,
      }
      console.log(`data ==>`, data)
      getManufacturersSkuListByPurchase(data).then((res) => {
        const { code, rows, total } = res
        if (code === 200) {
          this.manufacturersSku.tableData = rows
          this.manufacturersSku.pageTotal = total
        }
      })
    },
    handlePurchaseType(type) {
      return this.purchase_type_list.filter((i) => i.dictValue == type)[0].dictLabel || ''
    },
    /** 导出按钮操作 */
    handleExport(flag = false) {
      // 是否带图片，isImg：0-否  1-是

      if (this.queryParams.purchaseTime && this.queryParams.purchaseTime.length > 0) {
        const data = JSON.parse(JSON.stringify(this.queryParams))
        data.purchaseStartTime = this.queryParams.purchaseTime[0]
        data.purchaseEndTime = this.queryParams.purchaseTime[1]
        this.download(
          '/distribution/purchase/export',
          {
            ...data,
            isImg: flag === true ? 1 : 0,
          },
          `export_${new Date().getTime()}.xlsx`,
          { timeout: 60 * 1000 * 20 /**20分钟 */ },
        )
      } else {
        return this.$message.error('请选择时间范围')
      }
    },
    /**
     * 查询厂家/已采购厂家的详情
     */
    handleManufacturerDetail(id, type) {
      this.manufacturersSku.queryParams.manufacturersId = id
      this.getManufacturersSkuListByPurchase()
      let detail
      /**
       * 已采购厂家
       */
      if (type == 'old') {
        detail = this.manufacturersListOld.filter((i) => i.id == id)[0] || {}
      } else {
        /**
         * 厂家
         */
        detail = this.manufacturersList.filter((i) => i.id == id)[0] || {}
      }
      // Object.keys(this.manufacturerDetail).forEach(
      //   (key) => (this.manufacturerDetail[key] = detail[key])
      // );
      getManufacturers({
        skuId: this.form.skuId,
        manufacturersId: detail.id,
      }).then((res) => {
        // this.manufacturerDetail.skuUrl = res.data?.skuUrl;
        Object.keys(this.manufacturerDetail).forEach((key) => (this.manufacturerDetail[key] = res.data[key]))
        if (!this.manufacturerDetail.skuUrl) {
          this.manufacturerDetail.skuUrl = ''
        } else if (!this.manufacturerDetail.skuUrl.startsWith('https://')) {
          this.manufacturerDetail.skuUrl = 'https://' + this.manufacturerDetail.skuUrl
        }
      })
    },
    handlePriceUnit(id) {
      // <!-- 付款总价单位 1-RMB 2-JPY 3-USD -->
      if (id == 1) return 'RMB'
      if (id == 2) return 'JPY'
      if (id == 3) return 'USD'
    },

    handleSave() {
      const data = JSON.parse(JSON.stringify(this.detailInfo.form))
      this.$refs['saveForm'].validate((valid) => {
        if (valid) {
          updatePurchase(data).then((res) => {
            const { code, data, msg } = res
            if (code === 200) {
              this.$message({ type: 'success', message: msg })

              this.detailInfo.show = false
              this.getList()
            }
          })
        }
      })

      // updatePurchase
    },
    /**查询发货方式 */
    get_deliver_goods_cn_list() {
      return useDict('deliver_goods_cn').then(({ deliver_goods_cn }) => {
        this.deliver_goods_cn_list = deliver_goods_cn
      })
    },
    handleDeliveGood(value) {
      /*const name = this.deliver_goods_cn_list.filter((i) => (i.dictValue = value))
      if (name && name.length > 0) {
        return name[0].dictLabel
      }
      return ''*/
      // 20231221 以上代码赋值错误
      const foundItem = this.deliver_goods_cn_list.find((item) => item.dictValue === value)
      return foundItem ? foundItem.dictLabel : ''
    },

    handleSelectSku(e) {
      if (this.form.choice == 3) {
        this.getManufacturersListOld()
      }
    },
    resetManufacturersSku() {
      /******************厂家关联sku********************* */
      this.manufacturersSku.tableCheck = []
      this.manufacturersSku.tableData = []
      this.manufacturersSku.pageTotal = 0
      this.manufacturersSku.queryParams = {
        manufacturersId: '',
        pageNum: 0,
        pageSize: 10,
      }
      /******************厂家关联sku end***************** */
    },
    handleRadioChange(type) {
      this.resetManufacturersSku()

      this.form.manufacturersId = ''
      Object.keys(this.manufacturerDetail).forEach((key) => (this.manufacturerDetail[key] = ''))
      if (type == 3) {
        this.getManufacturersListOld()
      }
    },
    relaod() {
      this.getList()
    },
    handleEdits(row) {
      this.$refs.Skucontmoduler.setSkuInfo(row)
      this.$refs.Skucontmoduler.checkNumber('basicInformation')
    },
    async getTypeList() {
      await useDict('purchase_type').then(({ purchase_type }) => {
        this.purchase_type_list = purchase_type
      })
    },
    setVisible(type) {
      //采购类型 1-国内采购 2-酒水采购 3-日本当地采购
      if (type == 1) {
        this.form.choice = 1
      }
    },
    setSkuUnitPrice(num) {
      if (this.form.skuUnitPrice) this.form.skuUnitPrice = (this.form.skuTotalValue / this.form.num).toFixed(4)
    },
    setInfo(e) {
      this.form.skuTotalValue = (+this.form.payPrice * +this.exchangeRate).toFixed(4)
      this.form.skuUnitPrice = (this.form.skuTotalValue / this.form.num).toFixed(4)
    },
    /**获取汇率 */
    getExchangeRate() {
      getConversionRateList().then((res) => {
        this.exchangeRateList = res.data
        const cnRate = res.data?.filter((i) => i.baseCode == 'CNY')
        this.exchangeRate = cnRate[0].conversionRate
      })
    },
    /**设置汇率 */
    handleExchangeRate(id) {
      // 付款总价单位 1-RMB 2-JPY 3-USD
      if (id == 1) {
        const cnRate = this.exchangeRateList?.filter((i) => i.baseCode == 'CNY')
        this.exchangeRate = cnRate[0].conversionRate
      }
      if (id == 2) {
        this.exchangeRate = 1
      }
      if (id == 3) {
        const cnRate = this.exchangeRateList?.filter((i) => i.baseCode == 'USD')
        this.exchangeRate = cnRate[0].conversionRate
      }
      // 重新计算  总货值  单价
      this.form.skuTotalValue = (+this.form.payPrice * +this.exchangeRate).toFixed(4)
      this.form.skuUnitPrice = (this.form.skuTotalValue / this.form.num).toFixed(4)
    },
    handleDetail(id) {
      getPurchaseInfo(id).then((res) => {
        this.detailInfo.show = true
        this.detailInfo.form = JSON.parse(JSON.stringify(res.data))

        const payPriceUnit = this.detailInfo.form.payPriceUnit

        let exchangeRate

        // 付款总价单位 1-RMB 2-JPY 3-USD
        if (payPriceUnit == 1) {
          const rate = this.exchangeRateList?.filter((i) => i.baseCode == 'CNY')
          exchangeRate = rate[0].conversionRate
        }
        if (payPriceUnit == 2) {
          exchangeRate = 1
        }
        if (payPriceUnit == 3) {
          const rate = this.exchangeRateList?.filter((i) => i.baseCode == 'USD')
          exchangeRate = rate[0].conversionRate
        }
        this.detailInfo.form.exchangeRate = exchangeRate
      })
    },
    getSkuList(skuNo) {
      getSkuList(skuNo).then((res) => {
        this.skuList = res.data
      })
    },
    /**获取供应厂家列表  （厂家） */
    getManufacturers() {
      getManufacturerList().then((res) => (this.manufacturersList = res.data))
    },
    resetForm() {
      this.form = {
        type: 1,
        payPrice: null,
        skuTotalValue: null,
        payPriceUnit: 1,
        choice: 1,
        num: 1,
        skuId: '',
        skuTotalValue: 0,
        skuUnitPrice: 0,
        manufacturersId: '',
      }
    },
    resetAddForm() {
      this.addForm = {
        purchasePlatformLink: '',
        manufacturersName: '',
        manufacturersTel: '',
        manufacturersAddress: '',
        principalName: '',
        principalTel: '',
        netConcat: '',
      }
    },
    handleAdd() {
      this.resetForm()
      this.resetAddForm()
      this.showName = 'add'
      this.showDialog = true
      this.getSkuList()
      this.getManufacturers()
    },
    /**已采购厂家 */
    getManufacturersListOld() {
      getManufacturersListOld(this.form.skuId).then((res) => {
        this.manufacturersListOld = res.data
      })
    },
    handleDelete(id) {
      this.$confirm(this.$t('确认删除?'), this.$t('提示'), {
        type: 'warning',
      })
        .then(() => {
          deletePurchase(id).then((res) => {
            if (res.code == 200) {
              this.$message({ type: 'success', message: res.msg })
              this.showDialog = false
              this.getList()
            }
          })
        })
        .catch((e) => e)
    },
    async handleSubmit(type, data) {
      //国内
      if (type == 1) {
        const res = await createPurchaseOrderCn(data)
        if (res.code == 200) {
          this.$message({ type: 'success', message: res.msg })

          this.showDialog = false
          this.getList()
        }
      }
      //日本
      if (type == 3) {
        const res = await createPurchaseOrderJp(data)
        if (res.code == 200) {
          this.$message({ type: 'success', message: res.msg })

          this.showDialog = false
          this.getList()
        }
      }
    },
    submitForm() {
      let self = this
      const data = JSON.parse(JSON.stringify(self.form))
      // 国内和日本
      const type = this.form.type
      const choice = this.form.choice // 1.选择所有厂家   2.新增厂家   3.选择已采购厂家

      if (type == 1 || type == 3) {
        this.$refs.elForm.validate((valid) => {
          if (valid) {
            if (choice == 2) {
              self.$refs.addForm.validate(async (valid) => {
                if (valid) {
                  data.dsManufacturersVo = self.addForm
                  data.manufacturersId = null
                  this.handleSubmit(type, data)
                }
              })
            } else {
              data.dsManufacturersVo = {}
              this.handleSubmit(type, data)
            }
          }
        })
      }

      // 酒水
      if (type == 2) {
        return
      }
    },
    // 取消申请
    cancel() {},
    /** 查询菜单列表 */
    getList() {
      this.loading = true
      if (this.queryParams.purchaseTime && this.queryParams.purchaseTime.length > 0) {
        this.queryParams.purchaseStartTime = this.queryParams.purchaseTime[0]
        this.queryParams.purchaseEndTime = this.queryParams.purchaseTime[1]
      }
      getPurchaseListByDistributor(this.queryParams).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.value1 = null
      Object.keys(this.queryParams).forEach((key) => {
        this.queryParams[key] = null
      })
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10

      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped>
.blue {
  color: rgb(24, 144, 255);
}
.yellow {
  color: rgba(241, 129, 0, 0.973);
}
.red {
  color: red;
}
.my-dialog {
  display: flex;

  .left-form {
    flex: 1;
  }

  .right-table {
    // flex: 2;
    width: 600px;
    margin-top: -30px;
    margin-left: 20px;

    &_title {
      font-weight: bold;
      margin: 5px 0;
    }

    .table {
      border: 1px solid #eee;
    }
  }
}

::v-deep .el-table .el-table__cell {
  padding: 4px !important;
}

.bigImg {
  border-radius: 3px;
  z-index: 10;
  position: fixed;
  width: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
